<template>
<!-- 绑定手机 -->
  <div class="container">
    <v-header :title="title"></v-header>

    <div class="bar"></div>

    <div class="content">
      <form class="mui-input-group">
        <div class="mui-input-row phone">
          <span>手机号</span>
          <div class="input-box">
            <input type="number" class="mui-input-clear" placeholder="请输入手机号码" maxlength="11">
          </div>
        </div>
        <div class="mui-input-row code">
          <span>验证码</span>
          <div class="input-box">
            <input type="number" placeholder="请输入验证码" maxlength="6">
            <div class="getCode">获取验证码</div>
          </div>
        </div>

        <div class="mui-button-row">
          <button type="button" class="mui-btn confirm-btn">绑定</button>
        </div>
      </form>

    </div>

  </div>
</template>

<script type="text/ecmascript-6">

import VHeader from 'components/v-header'

export default {
  data() {
    return {
      title: '绑定手机'
    }
  },
  components: {
    VHeader
  },
  mounted() {
    mui('.mui-input-row input').input();
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color #fff
  .bar
    width 100%
    height 20px
    background-color $color-bg-gray
  .content
    form
      margin 0 30px
      .phone, .code
        display flex
        align-items center
        height 50px
        font-size $font-size-small
        span 
          display block
          width 55px
          color #999999
          line-height 1
        .input-box
          position relative
          flex 1 
          input 
            width 100%
            height 50px
            padding-left 10px
            &::placeholder
              font-size $font-size-small-s
          .getCode
            position absolute
            top 50%
            transform translateY(-50%) 
            right 0
            padding 5px 8px
            line-height 1
            border-radius 14px
            border 1px solid $color-theme
            color $color-theme
            font-size $font-size-small-s
      .phone, .code 
        border-bottom-1px(#ccc) 
      .confirm-btn
        width 100%
        height 45px
        margin-top 100px
        background-color $color-theme
        color #fff
        font-size $font-size-medium


</style>
